<template>
  <div class="container">
    <GlobalHeader :user="currentUser"></GlobalHeader>
    <!-- <ColumnList :list="list"></ColumnList> -->
    <ValidateForm @form-submit="onFormSubmit">
      <div class="mb-3">
        <label class="form-label">邮箱地址</label>
        <VaildateInput
         :rules="emailRules"
         v-model="emailVal"
         placeholder="请输入邮箱地址"
         type='text'
         ref="inputRef"
        />
      </div>
      <div class="mb-3">
        <label class="form-label">密码</label>
        <VaildateInput
         type="password"
         :rules="passwordRules"
         v-model="passwordVal"
         placeholder="请输入密码"
        />
      </div>
      <template #submit>
        <span class="btn btn-danger">Submit</span>
      </template>
    </ValidateForm>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import 'bootstrap/dist/css/bootstrap.min.css'

// import ColumnList, { ColumnProps } from './components/ColumnList.vue'
import GlobalHeader, { UserProps } from './components/GlobalHeader.vue'
import VaildateInput, { RulesProp } from './components/VaildateInput.vue'
import ValidateForm from './components/ValidateForm.vue'

const currentUser: UserProps = {
  isLogin: true,
  name: 'Gavin'
}

// const testData: ColumnProps[] = [
//   {
//     id: 1,
//     title: 'test1的专栏',
//     description:'这是一个test1的专栏，有一段分非常有意思的简介，可以更新一下',
//     avatar:'https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg'
//   },
//   {
//     id: 2,
//     title: 'test2的专栏',
//     description:'这是一个test2的专栏，有一段分非常有意思的简介，可以更新一下',
//     avatar:'https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg'
//   },
//   {
//     id: 3,
//     title: 'test2的专栏',
//     description:'这是一个test2的专栏，有一段分非常有意思的简介，可以更新一下',
//     avatar:'https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg'
//   },
//   {
//     id: 4,
//     title: 'test2的专栏',
//     description:'这是一个test2的专栏，有一段分非常有意思的简介，可以更新一下',
//     avatar:'https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg'
//   },
//   {
//     id: 5,
//     title: 'test2的专栏',
//     description:'这是一个test2的专栏，有一段分非常有意思的简介，可以更新一下'
//     // avatar:'https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg'
//   },
//   {
//     id: 6,
//     title: 'test2的专栏',
//     description:'这是一个test2的专栏，有一段分非常有意思的简介，可以更新一下',
//     avatar:'https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg'
//   }
// ]

export default defineComponent({
  name: 'App',
  components:{
    // ColumnList,
    GlobalHeader,
    VaildateInput,
    ValidateForm
  },
  setup(){
    const inputRef = ref<any>()
    const passwordVal = ref('')
    const emailRules: RulesProp = [
      {type: 'required', message: '电子邮件地址不能为空'},
      {type: 'email', message: '请输入正确电子邮件格式'}
    ]
    
    const emailVal = ref('')
    const passwordRules: RulesProp = [
      {type: 'required', message: '密码不能为空'}
    ]

    const onFormSubmit = (result: boolean) => {
      console.log(result, inputRef.value.validateInput())
    }

    return{
      // list: testData,
      currentUser,
      emailRules,
      emailVal,
      passwordRules,
      passwordVal,
      onFormSubmit,
      inputRef
    }
  }
});
</script>

<style lang="less">
</style>
